/******获取节点的方法*********/
function $$(ele) {
  return document.querySelector(ele)
}

/*******发送ajax的方法******/
function ajax(param) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open('get', param.url);
    xhr.send();
    xhr.addEventListener('readystatechange', res);

    function res() {
      if (xhr.readyState == 4 && xhr.status == 200) resolve(xhr.response);
    }
  });
}
/**********实现数据的添加******/
// 准备:给保存绑定
let saveObj = $$('.save');
saveObj.addEventListener('click', addFn);

function addFn() {
  // 1 收集表单数据
  let title = $$('#title').value;
  let pos = $$('#pos').value;
  let idea = $$('#idea').value;
  // 2 验证是否为空
  if (!title || !pos || !idea) return;
  // 3 拼接数据
  let param = `title=${title}&pos=${pos}&idea=${idea}`;
  // 4 发送请求,fn=add 表是请求php中的add方法
  ajax({
    url: './lib/index.php?fn=add&' + param
  }).then(res => {
    console.log(res)
    // 5 判断是否成功
    res = JSON.parse(res);
    if (res.stateCode == 200) {
      //  console.log(1111)
      $('#addModal').modal('toggle');
      // 重新刷新网页
      location.reload();
    }
  });
}
/**********数据列表的实现******/
// 1 声明函数
function lst(size = 1) {
  // 2 发送ajax请求
  ajax({
    url: './lib/index.php?fn=get&psize=' + size
  }).then(res => {
    // console.log(res);
    res = JSON.parse(res);
    // console.log(res);
    if (res.stateCode == 200) {
      // console.log(res.data.pageData);
      // 声明字符串保存变量
      let {
        pageData,
        pcount
      } = res.data;
      let str = '';
      pageData.forEach(ele => {
        //console.log(ele);
        // 3 数据的渲染
        // 提取每一个变量
        let {
          id,
          title,
          idea,
          pos
        } = ele;
        str += `<tr id="info-${id}">
        <th scope = "row"> ${id}</th >
        <td>${title}</td><td>${pos}</td>
        <td>${idea}</td><td>
        <button type="button" 
        class="btn btn-danger btn-sm del-data" 
        data-toggle="modal" data-target=".del-modal" 
        onclick="del(${id})">删除</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-info btn-sm update-data"
         data-toggle="modal" data-target=".update-modal" 
         onclick="update(${id})">修改</button></td></tr >`;
      });
      // 4 追加到页面中
      $$('tbody').innerHTML = str;
      // 渲染分页
      let pageStr = `<li>
        <a href="javascript:;" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        </a>
      </li>`;
      var active = '';
      for (var i = 1; i <= pcount; i++) {
        if (i == size) active = 'class="active"';
        else active = '';
        pageStr += `<li ${active} onclick='lst("${i}")'>
        <a href="javascript:;">${i}</a></li>`;
      }
      pageStr += `<li>
        <a href="javascript:;" aria-label="Next">
        <span aria-hidden="true">&raquo;</span></a>
      </li>`;
      // 将分页追加到页面
      $$('.pagination').innerHTML = pageStr;
    }
  });
}
lst();
// 函数自调用 ()();
/**********删除的实现******/
//$$('.del-data').addEventListener('click', del);
// let del = () => {}
function del(id) {
  //console.log(id)
  // 1 获取残忍删除按钮,将id放到上面
  $$('.sure-del').setAttribute('del-info', id);
}
// 确认删除时,进行删除
$$('.sure-del').addEventListener('click', function () {
  // 注意:这里用的是匿名函数,this指向节点
  //  console.log(this);
  let id = this.getAttribute('del-info');
  // 放ajax请求
  ajax({
    url: './lib/index.php?fn=del&id=' + id
  }).then(res => {
    // console.log(res);
    res = JSON.parse(res);
    if (res.stateCode == 200) {}
    // 关闭弹出框
    $('.del-modal').modal('toggle');
    // 删除对应的节点
    $$('#info-' + id).remove();
  });
});

/**********修改的实现******/
function update(id) {
  // 获取修改按钮，将id放在上面
  $$('.sure-update').setAttribute('update-info', id);
  $$('#title1').value = $$('#info-' + id).children[1].innerHTML;
  $$('#pos1').value = $$('#info-' + id).children[2].innerHTML;
  $$('#idea1').value = $$('#info-' + id).children[3].innerHTML;
}
// 确认修改时,进行修改
$$('.sure-update').addEventListener('click', function () {
  // 注意:这里用的是匿名函数,this指向节点
  //  console.log(this);
  let id = this.getAttribute('update-info');
  let title = $$('#title1').value;
  let pos = $$('#pos1').value;
  let idea = $$('#idea1').value;
  // 放ajax请求
  // 拼接数据
  let param = `id=${id}&title=${title}&pos=${pos}&idea=${idea}`;
  console.log(param);

  ajax({
    url: './lib/index.php?fn=update&' + param
  }).then(res => {
    // console.log(res);
    res = JSON.parse(res);
    if (res.stateCode == 200) {}
    // 关闭弹出框
    $('.update-modal').modal('toggle');
    // 修改对应的节点
    lst();
  });
  // ajax({url: './lib/index.php?fn=add&' + param}).then(res => {
  //   console.log(res)
  //   // 5 判断是否成功
  //   res = JSON.parse(res);
  //   if (res.stateCode == 200) {
  //     //  console.log(1111)
  //     $('#addModal').modal('toggle');
  //     // 重新刷新网页
  //     location.reload();
  //   }
  // }
});